<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<title></title>
		<style type="text/css">
		body{
			background-color: gainsboro;
			
		}
			#img>img {
				width: 70px;
				height: 70px;
				margin-top: 20px;
				margin-left: 10px;
				border-radius: 35px;
			}
			
			#span_right {
				margin-left: 20px;
			}
			
			#login {
				margin-top: 20px;
			}
			
			#one {
				background-color: red;
			}
			
			#two{
				background-color: white;
				margin-bottom: 15px;
				height: 70px;
				padding-top: 5px;
				
			}
			#icon{
				text-align: center;
			}
			#icon-icon{
				font-size: 35px;
			}
			#icom-txt{
				font-size: 18px;
			}
			.van-info{
				position: relative;
				top: -50px;
				font-size: 20px;
				margin-left: 25px;
				width: 20px;
				height: 20;
				border-radius: 10px;
				}
			#span{
				
				position: absolute;
				font-size: 20px;
				color: white;
				margin-left: -10px;
				width: 20px;
				height: 20px;
				border-radius: 10px;
				background-color: red;
				}
				#spans{
					
					position: absolute;
					font-size: 20px;
					color: white;
					margin-left: -10px;
					width: 20px;
					height: 20px;
					border-radius: 10px;
					background-color: red;
					}
		</style>
	</head>

	<body>
		<div id="app">
			<van-row id="one">
				<van-col span="24">
					<van-col span="4">
						<span id="img">
				 			<img src="../img/userimg.PNG"/>
					    </span>
					</van-col>
					<van-col span="6" id="login">
						<span id="span_right">
				 	  <a href="#" @click="dl(0)" v-text="name" ></a>
				    </span>
					</van-col>
				</van-col>
			</van-row>
			<van-row id="two">
				<van-col span="6" id="icon" onclick="fk()">
					<van-icon name="pending-payment" id="icon-icon"/><span id="span" >{{info}}</span>
					<div id="icom-txt">
						待付款
					</div>					 
				</van-col>
				<van-col span="6" id="icon" onclick="sh()">
					<van-icon name="records" id="icon-icon"/>
					<div id="icom-txt">
						待收货
					</div>					 
				</van-col>
				<van-col span="6" id="icon" onclick="pl()">
					<van-icon name="tosend" id="icon-icon"/>
					<div id="icom-txt">
						待评论
					</div>					 
				</van-col>
				<van-col span="6" id="icon" onclick="dd()">
					<van-icon name="logistics" id="icon-icon"/><span id="spans" >{{info}}</span>
					<div id="icom-txt">
						我的订单
					</div>					 
				</van-col>
			</van-row>
			<van-row id="three">
				<van-col span="24" >
					<van-cell title="个人资料" icon="manager-o" is-link  size="large" @click="dl(1)"/>
				</van-col>
				<van-col span="24" >
					<van-cell title="收货地址" icon="location-o" size="large" is-link  @click="dl(2)"/>
				</van-col>
				<van-col span="24" >
					<van-cell title="我的收藏" icon="like-o" size="large" is-link @click="dl(3)"/>
				</van-col>
				<van-col span="24" style="margin-top: 15px;">
					<van-cell title="设置" icon="setting-o" size="large" is-link  @click="dl(4)"/>
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">		
			var app = new Vue({
				el: "#app",
				data: {
					name:"未登录",
					info:0
				},
				mounted(){
					var _this=this;
					if (localStorage.getItem("name") != null) {
						_this.name = localStorage.getItem("name");  
					}
				},
				methods:{
					dl:function(n){
						if(localStorage.getItem("name")==null){
							plus.webview.create("sgin.html","sgin");
							plus.webview.show("sgin");
						}
						else{
						switch(n){
							case 1:
							plus.webview.create("personaldata.html","personaldata");//个人资料页面
							plus.webview.show("personaldata");
							break;
							case 2:
								plus.webview.create("address.html","address");//收货地址页面
								plus.webview.show("address");
							break;
							case 3:
								plus.webview.create("myorder-null.html","order");//我的收藏页面
								plus.webview.show("order");
							break;
							case 4:
								plus.webview.create("set.html","set");//设置页面
								plus.webview.show("set");
							break;
							}
							
							
						}
					}
				}
			});
			ajax({
				url:"http://dsapi.ysd3g.com/api/MyOrderList",
				dataType:"JSONP",
				data:{
					key:localStorage.getItem("keys")
				},
				success:function(res){
					console.log(res.Data.length)
					localStorage.setItem("info",res.Data.length);
					app.info=res.Data.length;
				}
				});	
				var span =document.getElementById("span");
				var spans =document.getElementById("spans");
				if(app.info==0){
					span.style.display="none";
					spans.style.display="none";
				}else{
					app.info=localStorage.getItem("info");
				}
			function fk(){
				if(localStorage.getItem("keys")==null){
					plus.webview.open("sgin.html","logins");
				}
				else{
					plus.webview.create("dlpay.html","dlpay");
					plus.webview.show("dlpay");
				}
				
			}
			function sh(){
				if(localStorage.getItem("keys")==null){
					plus.webview.open("sgin.html","logins");
				}
				else{
					plus.webview.create("mycollect-null.html","collect");
					plus.webview.show("collect");
				}
			}
			function pl(){
				if(localStorage.getItem("keys")==null){
					plus.webview.open("sgin.html","sgin");
				}
				else{
					plus.webview.create("mycollect-null-pl.html","pl");
					plus.webview.show("pl");
				}
			}
			function dd(){
				if(localStorage.getItem("keys")==null){
					plus.webview.open("sgin.html","sgin");
				}
				else{
					plus.webview.create("mycollect.html","dd");
					plus.webview.show("dd");
				}
			}
		</script>
	</body>
</html>